<template>
  <div class="supplier-container">
    <h1>供应商端</h1>
    <a-card class="supplier-card">
      <template #title>供应商概览</template>
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic title="产品数量" :value="87" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="本月订单" :value="156" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="库存预警" :value="12" />
        </a-col>
      </a-row>
    </a-card>
    
    <a-divider />
    
    <a-card class="supplier-card">
      <template #title>供应商功能</template>
      <a-space direction="vertical" size="large" style="width: 100%">
        <a-row :gutter="16">
          <a-col :span="6" v-for="(item, index) in supplierFeatures" :key="index">
            <a-card hoverable>
              <template #cover>
                <div class="feature-icon">
                  <component :is="item.icon" />
                </div>
              </template>
              <a-card-meta :title="item.title">
                <template #description>{{ item.description }}</template>
              </a-card-meta>
            </a-card>
          </a-col>
        </a-row>
      </a-space>
    </a-card>
  </div>
</template>

<script setup>
import { IconGift, IconStorage, IconCodeSandbox, IconSettings } from '@arco-design/web-vue/es/icon';

const supplierFeatures = [
  { title: '产品管理', description: '管理供应产品', icon: IconGift },
  { title: '库存管理', description: '管理产品库存', icon: IconStorage },
  { title: '物流管理', description: '管理发货物流', icon: IconCodeSandbox },
  { title: '账户设置', description: '配置账户信息', icon: IconSettings }
];
</script>

<style scoped>
.supplier-container {
  padding: 20px;
}

.supplier-card {
  margin-bottom: 20px;
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  background-color: #f2f3f5;
  font-size: 36px;
  color: #165DFF;
}
</style>
